<template>
    <div class="about">
        <button class="aa" @click="show()">
            showToast
        </button>
        <button class="aa" @click="uninstall()">
            uninstall
        </button>

        <button class="aa" @click="offLine()">
            offLine
        </button>
        <button class="aa"  @click="createChannel()">
            createChannel
        </button>
        <br/>
        <button  class="aa" @click="joinChannel()">
            joinChannel
        </button>
        <br>
        对讲账号：<input type="text" v-model="mUser">
        <br/>
        对讲密码：<input type="text" v-model="mPwd">
        <br/>
        <button class="aa"  @click="initConn()">登录</button>
        <button class="aa"  @click="getAllInfo()">获取信息</button>
        <br/>
        频道名称：<input type="text" v-model="title">
        <br/>
        频道密码：<input type="text" v-model="pwd">
        <button class="aa" @touchstart="handleTouchStart()" @touchend="handleTouchEnd()">对讲按钮</button>
        <button class="aa" @click="enterChannel">进入频道</button>
        <br/>
        <br/>

        <span v-html="text"></span>
        <div style="width: 100vw;height: calc(100vh - 66vw);">
            <a-row type="flex" justify="space-around" style="width: 100vw;height: calc((100vh - 66vw)/3);">
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            防洪巡查
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            防洪巡查
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            防洪巡查
                        </div>
                    </div>
                </a-col>

            </a-row>
            <a-row type="flex" justify="space-around" style="width: 100vw;height: calc((100vh - 66vw)/3);">
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            防洪巡查
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            防洪巡查
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                    <div class="homework_content_ico">
                        <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                    </div>
                    <div class="homework_content_text">
                        防洪巡查
                    </div>
                </div></a-col>
            </a-row>

            <a-row type="flex" justify="space-around" style="width: 100vw;height: calc((100vh - 66vw)/3);">
                <a-col :span="8">col-4</a-col>
                <a-col :span="8">col-4</a-col>
                <a-col :span="8">col-4</a-col>
            </a-row>
        </div>
    </div>
</template>
<style>
    .aa {
        font-size: 16px;
        margin: 0 3px 0;
        height: 36px;
        -webkit-touch-callout: none; /*系统默认菜单被禁用*/
        -webkit-user-select: none; /*webkit浏览器*/
        -moz-user-select: none; /*火狐*/
        -ms-user-select: none; /*IE10*/
        user-select: none;
        /*这种方法会导致input输入框不可用，可以添加这一句解决这个问题：input{-webkit-user-select: auto;}*/
    }


</style>
<script>
    export default {
        name: "Test",
        components:{},
        data() {
            return {
                msg: 'hello vue',
                mUser:'',
                mPwd:'',
                title:'',
                pwd:'',
                touchStatus: false,
                timer: null,
                fileText:'',
                text:'',
            }
        },
        mounted(){

        },
        created() {
            this.backButton();

        },
        methods:{
            backButton(){
                /*document.addEventListener("deviceready", onDeviceReady, false);
                function onDeviceReady() {
                  //监听返回键按钮事件
                  console.log("deviceready ...")
                  document.addEventListener("backbutton", eventBackButton, false);
                }*/
                document.addEventListener("backbutton", eventBackButton, false);
                function eventBackButton() {
                    //进入后台
                    navigator.Backbutton.goHome(function() {
                        console.log('go home success');
                    }, function() {
                        console.log('go home fail');
                    });
                }
            },
            show(){
                console.log("show():");
                Intercom.showToast('你好!我是JS中调用的代码',this.showToastSuccess,this.showToastError);
            },
            uninstall(){
                Intercom.uninstallApp();
            },
            initConn(){
                console.log("进入initConn()方法");
                let options ={
                    mUser : this.mUser,
                    mPwd : this.mPwd,
                }
                Intercom.initConn(this.onConnSuccess,this.onConnError,options);
            },
            joinChannel(){
                let success = function(result){
                    console.log("加入频道成功",result);
                };
                let fail = function(e){
                    console.log("加入频道失败",e);
                };
                let options ={
                    channelId : this.title,
                    pwd : this.pwd,
                    comment:'',
                };
                Intercom.joinChannel(success,fail,options);
            },
            showToastSuccess(myMessage){
                console.log("showToastSuccess 成功回调");
                console.log(myMessage);
            },
            showToastError(e){
                console.log("showToastError 错误回调");
                console.log(e);
            },
            onConnSuccess(myMessage){
                console.log("onConnSuccess");
                console.log(myMessage);
            },
            onConnError(e){
                console.log("onConnError");
                console.log(e);
            },
            offLine(){
                let success = function(result){
                    console.log("离线成功",result);
                }
                let fail = function(e){
                    console.log("离线失败",e);
                }
                Intercom.offLine(success,fail);
            },
            createChannel(){
                let success = function(result){
                    console.log("创建频道成功",result);
                }
                let fail = function(e){
                    console.log("创建频道失败",e);
                }
                let options ={
                    title : this.title,
                    pwd : this.pwd,
                    searchable:true,
                    needapplyChecked:false,
                    tmp:false
                }
                Intercom.createChannel(success,fail,options);
            },
            handleTouchStart () {
                let success = function(result){
                    console.log("js开始对讲成功",result);
                }
                let fail = function(e){
                    console.log("js开始对讲失败",e);
                }
                this.touchStatus = true;
                Intercom.touchStart(success,fail);
                console.log("开始");

            },
            handleTouchEnd () {
                let success = function(result){
                    console.log("js释放对讲成功",result);
                }
                let fail = function(e){
                    console.log("js释放对讲失败",e);
                }
                this.touchStatus = false;
                Intercom.touchEnd(success,fail);
                console.log("释放");
            },
            enterChannel(){
                console.log("js enter channel");
                let success = function(result){
                    console.log("跳转成功");
                    console.log(result);
                };
                let fail = function(e){
                    console.log("跳转频道失败");
                    console.log(e);
                };
                let options = {
                    channelId: this.title,
                };
                Intercom.enterChannel(success,fail,options);
            },
            getAllInfo(){
                let success = function(result){
                    console.log("获取信息成功");
                    console.log(result);
                };
                let fail = function(e){
                    console.log("获取信息失败");
                    console.log(e);
                };

                Intercom.getAllInfo(success,fail);
            }

        },

    }
</script>
